<style lang="scss" scoped>
.el-steps {
  margin-bottom: 10px;
}
</style>
<template>
  <div class="step">
    <el-steps :active="getActive()" align-center>
      <el-step :title="item.title" v-for="item in list" :key="item.name" @click.native="toJump(item)" />
    </el-steps>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'UploadCom',
  data() {
    return {
      list: [
        {title: '订单', route: '/step/order'},
        {title: '收发货单位', route: '/step/company'},
        {title: '商品', route: '/step/goods'},
        {title: '文件', route: '/step/file'},
      ]
    }
  },
  methods: {
    toJump(item) {
      this.$router.push({
        path: item.route,
        query: {
          id: this.$route.query.id
        }
      })
    },
    getActive() {
      return this.$route.meta.active
    }
  }
}
</script>
